<template>
  <div>
    <tableTep
      :tableConfig="state.tableConfig"
      :tableHeader="state.tableHeader"
      :tableHandleList="state.tableHandleList"
      :searchList="state.searchList"
      :searchForm="state.searchForm"
      :getDataAsync="getMenuList"
      @removeHandle="removeHandle"
      @editHandle="editHandle"
      @addHandle="addHandle"
      @returnDataList="returnDataList"
      ref="tableTepRef"
    >
      <template v-slot:content>
        <el-col :span="6">
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button type="primary" @click="resetHandle">重置</el-button>
        </el-col>
      </template>
      <template v-slot:businessHandle>
        <el-button type="primary" @click="addState">新建</el-button>
      </template>
    </tableTep>
    <el-dialog
      v-if="dialogVisible"
      v-model="dialogVisible"
      :title="dialogTitle"
      width="60%"
      :before-close="handleClose"
    >
      <FormTep
        :formList="addFormListComputed"
        :formData="state.addForm"
        ref="FormTepRef"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCanCel">取消</el-button>
          <el-button type="primary" @click="submitHandle">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name:'Menu'
}
</script>
<script setup>
import tableTep from "@/components/tableTep/index.vue";
import FormTep from "@/components/FormTep/index.vue";
import { reactive, ref, inject, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { clearObj } from "@/utils/utils.js";
const { getMenuList, menuSubmit } = inject("$api");
import dayjs from "dayjs";
import { useStore } from "vuex";
let tableTepRef = ref(null);
let FormTepRef = ref(null);
const state = reactive({
  tableHeader: [
    {
      prop: "menuType",
      label: "菜单类型",
      // 0:菜单 1:按钮
      propDefine: (row) => {
        if (row.menuType == 0) {
          return `<span style="color:blue">菜单</span>`;
        } else {
          return `<span style="color:blue">按钮</span>`;
        }
      },
    },
    {
      prop: "menuName",
      label: "菜单名称",
    },
    {
      prop: "menuCode",
      label: "菜单标识符",
    },
    {
      prop: "path",
      label: "菜单路由",
    },
    {
      prop: "icon",
      label: "菜单图标",
      propDefine: (row) => {
        return `<span style="color:red">${row.icon}</span>`;
      },
    },
    {
      prop: "component",
      label: "组件地址",
    },
    {
      prop: "menuState",
      label: "菜单状态",
      propDefine: (row) => {
        if (+row.menuState === 0) {
          return `<span>禁用</span>`;
        }
        if (+row.menuState === 1) {
          return `<span>正常</span>`;
        }
      },
    },
    {
      prop: "createTime",
      label: "创建时间",
      propDefine: (row) => {
        return `<span>${dayjs(row.createTime).format(
          "YYYY-MM-DD HH:mm"
        )}</span>`;
      },
    },
  ],
  tableConfig: {
    showIndex: true, //是否显示序号
    tableHeight: 600, //表格高度
    isSelection: true,
    tableSize: 1,
    isRemember: true,
    defaultOptions: {
      border: true,
    },
    handleOption: {
      handleName: "操作", // 操作列表头名称
      width: 250,
      align: "center",
    },
  },
  tableHandleList: [
    // 具体操作
    {
      label: "编辑",
      handle: "editHandle",
      btnAttr: {
        //按钮配置项
        size: "mini",
        type: "primary",
      },
    },
    // 具体操作
    {
      label: "删除",
      handle: "removeHandle",
      btnAttr: {
        //按钮配置项
        size: "mini",
        type: "danger",
      },
    },
    {
      label: "新增",
      handle: "addHandle",
      btnAttr: {
        //按钮配置项
        size: "mini",
        type: "danger",
      },
      isShow: (row) => {
        return row.menuType === 0;
      },
    },
  ],
  searchList: [
    {
      name: "menuName", //字段名
      type: "TextMoudel", //类型
      title: "菜单名称",
      required: false, // 必填
      span: 6,
    },
    {
      name: "menuState", //字段名
      type: "SelectMoudel", //类型
      title: "菜单状态",
      required: false, // 必填
      options: [
        {
          value: 0,
          label: "禁用",
          // disabled: true,
        },
        {
          value: 1,
          label: "启用",
        },
      ],
      span: 6,
    },
  ],
  searchForm: {
    menuName: "",
    menuState: "",
  },
  addFormList: [
    {
      name: "parentIdList", //字段名
      type: "CascaderMoudel", //类型
      title: "父菜单",
      required: false, // 必填
      span: 12,
      definProps: {
        clearable: true,
        props: { checkStrictly: true, value: "_id", label: "menuName" },
        disabled: false,
      },
      options: [],
      change: function (value) {
        state.addForm.parentId = value ? value[value.length - 1] : null;
      },
    },
    {
      name: "menuType", //字段名
      type: "RadioGroupMoudel", //类型
      title: "菜单类型",
      trigger: ["change"],
      required: true, // 必填
      span: 24,
      options: [
        {
          value: 0,
          label: "菜单",
        },
        {
          value: 1,
          label: "按钮",
        },
      ],
    },
  ],
  menuFormList: [
    {
      name: "menuName", //字段名
      type: "TextMoudel", //类型
      title: "菜单名称",
      required: true, // 必填
      span: 24,
    },
    {
      name: "menuNameKey", //字段名
      type: "TextMoudel", //类型
      title: "菜单路由名称",
      required: true, // 必填
      span: 24,
    },
    {
      name: "icon", //字段名
      type: "TextMoudel", //类型
      title: "菜单图标",
      required: false, // 必填
      span: 24,
    },
    {
      name: "path", //字段名
      type: "TextMoudel", //类型
      title: "菜单路由",
      required: false, // 必填
      span: 24,
    },
    {
      name: "component", //字段名
      type: "TextMoudel", //类型
      title: "组件地址",
      required: false, // 必填
      span: 24,
    },
    {
      name: "menuState", //字段名
      type: "RadioGroupMoudel", //类型
      title: "菜单状态",
      trigger: ["change"],
      required: false, // 必填
      span: 24,
      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: 0,
          label: "停用",
        },
      ],
    },
  ],
  buttonFormList: [
    {
      name: "menuName", //字段名
      type: "TextMoudel", //类型
      title: "菜单名称",
      required: true, // 必填
      span: 24,
    },
    {
      name: "menuCode", //字段名
      type: "TextMoudel", //类型
      title: "权限标识",
      required: true, // 必填
      span: 6,
    },
  ],
  addForm: {
    parentIdList: [],
    parentId: "",
    menuType: 0,
    menuName: "",
    menuNameKey: "",
    icon: "",
    path: "",
    component: "",
    menuState: null,
    action: "",
    menuCode: "",
  },
});
const dialogVisible = ref(false);
const dialogTitle = ref("");
const handleClose = () => {
  dialogVisible.value = false;
  dialogTitle.value = "";

  state.addForm = clearObj(state.addForm);
  state.addForm.menuType = 0;
};

const addFormListComputed = computed(() => {
  if (state.addForm.menuType === 0) {
    return [...state.addFormList, ...state.menuFormList];
  } else {
    return [...state.addFormList, ...state.buttonFormList];
  }
});

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const returnDataList = (value) => {
  let res = state.addFormList.find((v) => v.name === "parentIdList");
  res.options = value;
};
/**
 * @description: 移出操作
 * @param {*}
 * @return {*}
 */
const removeHandle = (row) => {
  ElMessageBox.confirm(`是否删除名称为  ${row.menuName}  的菜单?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await menuSubmit({ _id: row._id, action: "delete" });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    await tableTepRef.value.refreshData();
  });
};
/**
 * @description: 修改数据
 * @param {*}
 * @return {*}
 */
const editHandle = (row) => {
  dialogVisible.value = true;
  dialogTitle.value = "编辑";
  state.addForm.action = "edit";
  Object.assign(state.addForm, row);
  let res = state.addFormList.find((v) => v.name === "parentIdList");
  res.definProps.disabled = true;
};
/**
 * @description: 当前栏下的添加操作
 * @param {*}
 * @return {*}
 */
const addHandle = (row) => {
  let res = state.addFormList.find((v) => v.name === "parentIdList");
  res.definProps.disabled = true;
  dialogTitle.value = "新增";
  state.addForm.action = "add";
  state.addForm.parentIdList =
    row.parentIdList && row.parentIdList.length === 0
      ? [row._id]
      : [...row.parentIdList, row._id];
  state.addForm.parentId = row._id;
  dialogVisible.value = true;
};
/**
 * @description: 搜索刷新列表
 * @param {*}
 * @return {*}
 */
const searchHandle = () => {
  tableTepRef.value.refreshData();
};

/**
 * @description:重置搜索
 * @param {*}
 * @return {*}
 */
const resetHandle = () => {
  state.searchForm = clearObj(state.searchForm);
  tableTepRef.value.refreshData();
};

/**
 * @description: 添加操作
 * @param {*}
 * @return {*}
 */
const addState = () => {
  let showDis = state.addFormList.find((v) => v.name === "parentIdList");
  showDis.definProps.disabled = false;
  dialogVisible.value = true;
  dialogTitle.value = "新增";
  state.addForm.action = "add";
};
/**
 * @description: 取消
 * @param {*}
 * @return {*}
 */
const handleCanCel = () => {
  dialogVisible.value = false;
  dialogTitle.value = "";
  state.addForm = clearObj(state.addForm);
  state.addForm.menuType = 0;
};
/**
 * @description: 提交
 * @param {*}
 * @return {*}
 */
const submitHandle = async () => {
  let res = await FormTepRef.value.submitForm();
  if (res) {
    menuSubmit(state.addForm).then((data) => {
      dialogVisible.value = false;
      dialogTitle.value = "";
      //TODO
      ElMessage({
        message: "创建成功",
        type: "success",
      });
      state.addForm = clearObj(state.addForm);
      state.addForm.menuType = 0;

      let showDis = state.addFormList.find((v) => v.name === "parentIdList");
      showDis.definProps.disabled = false;
      tableTepRef.value.refreshData();
    });
  }
};
</script>
<style scoped>
</style>
